<template>
    <div>
        <cus-modal ref="modal" :title="!form.id ? '添加供应信息' : '修改供应信息'" @on-visible-change="onVisibleChange" width="780" :loading="loadingModal"
            @onOk="onOk">
            <Form ref="formValidate" :model="form" :rules="ruleValidate" :label-width="125">
                <FormItem label="食材名称:" prop="foodName" :rules="{ required: true, message: '食材名称不能为空', trigger: 'blur' }">
                    <Input v-model="form.foodName" clearable style="width: 200px" placeholder="请输入食材名称"></Input>
                </FormItem>
                <FormItem label="食材种类:" prop="foodTypeName"
                    :rules="{ required: true, message: '食材种类不能为空', trigger: 'change' }">
                    <Select v-model="form.foodTypeName" style="width:200px" placeholder="请选择食材种类" clearable>
                        <Option :value="item.name" v-for="(item, index) in localfoodtypeList" :key="index">{{ item.name }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="商品编码:" prop="raiseCode">
                    <Input v-model="form.raiseCode" clearable style="width: 200px" placeholder="请输入商品编码"></Input>
                </FormItem>
                <FormItem label="区域:" prop="kitchenArea" :rules="{
                    required: true,
                    message: '区域不能为空',
                    trigger: 'change'
                }">
                    <Select v-model="form.kitchenArea" style="width: 200px;" placeholder="请选择区域">
                        <Option :value="item.kitchenArea" v-for="(item, index) in areaList" :key="index">
                            {{ item.kitchenAreaName }}
                        </Option>
                    </select>
                </FormItem>
                <!-- <FormItem label="供应商名称:" prop="supplyName"
                    :rules="{ required: true, message: '供应商不能为空', trigger: 'change' }">
                    <Select v-model="form.supplyName" style="width:200px" placeholder="请选择供应商" clearable>
                        <Option :value="item.name" v-for="(item, index) in querySupplierList" :key="index">{{ item.name }}
                        </Option>
                    </Select>
                </FormItem> -->
                <FormItem label="商品种类:" prop="productCategory"
                    :rules="{ required: true, message: '商品种类不能为空', trigger: 'change' }">
                    <Select v-model="form.productCategory" style="width:200px" placeholder="请选择商品种类" clearable>
                        <Option :value="item.categoryName" v-for="(item, index) in productcategoryList" :key="index">{{
                            item.categoryName }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="计量单位:" prop="specification"
                    :rules="[{ required: true, message: '计量单位不能为空', trigger: 'change', type: 'number' }]">
                    <Select v-model="form.specification" style="width: 200px" placeholder="请选择计量单位"
                        @on-change="changeSpecification">
                        <Option :value="item.specificationValue" v-for="(item, index) in specificationList" :key="index">{{
                            item.specification }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="单位重量/kg:" prop="unitWeight"
                    :rules="[{ required: true, message: '单位重量不能为空', trigger: 'blur', type: 'number' }]">
                    <InputNumber :min="0" v-model="form.unitWeight" style="width: 200px"
                        :disabled="form.specification == 0 || form.specification == 1"></InputNumber>
                </FormItem>
                <FormItem label="价格:" prop="packagingPrice"
                    :rules="{ required: true, message: '价格不能为空', trigger: 'blur', type: 'number' }">
                    <InputNumber :min="0" v-model="form.packagingPrice" style="width:200px"></InputNumber>
                </FormItem>
                <FormItem label="是否称重出入库:" prop="weightFlag"
                    :rules="[{ required: true, message: '称重方式不能为空', trigger: 'change' }]">
                    <Select v-model="form.weightFlag" placeholder="请选择称重方式" style="width: 200px" disabled>
                        <Option value="0">否</Option>
                        <Option value="1">是</Option>
                    </Select>
                </FormItem>
                <FormItem label="品牌:" prop="brand">
                    <Input v-model="form.brand" clearable maxlength="20" style="width: 200px" placeholder="请输入品牌"></Input>
                </FormItem>
                <FormItem label="商品条形码:" prop="snCode">
                    <Input v-model="form.snCode" clearable maxlength="20" style="width: 200px" placeholder="请输入商品条形码"></Input>
                </FormItem>
                <FormItem prop="effectiveDate" label="生效日期:">
                    <DatePicker type="date" placeholder="请选择生效日期" v-model="form.effectiveDate" style="width: 200px">
                    </DatePicker>
                </FormItem>
            </Form>
        </cus-modal>
    </div>
</template>

<script>
import {
    foodRaiseAdd,
    getDishType,
    getProductCategoryList,
    selectBasSpecificationList,
    localfoodtype
} from "@/api/organ/dishesModule";

const form = {
    supplyName: "", // 供应商名称
    foodName: "", // 食材名称
    packagingPrice: 1, // 价格
    foodTypeName: "", // 食材分类
    unitWeight: 1, // 单位重量
    raiseCode:'', //商品编码
    kitchenArea: '', //区域
    specification: "", // 规格
    productCategory: "", // 商品分类
    brand: "",
    snCode: "",
    weightFlag: "1",
    effectiveDate: ""
};

export default {
    name: "addSupplyinfoModal",
    data() {
        return {
            form: form,
            ruleValidate: {},
            loadingModal: false,
            specificationList: [],
            localfoodtypeList: [],
            productcategoryList: [], // 商品分类列表
            areaList: this.$store.state.selectList.areaList, //区域列表
            querySupplierList: [], // 供应商列表
        };
    },
    mounted() {
        this.form = this.$cu.deepClone(form);
    },
    methods: {
        onVisibleChange(v) {
            if (!v) {
                this.$refs["formValidate"].resetFields();
                this.form = this.$cu.deepClone(form)
            }
        },
        show() {
            this.$refs["modal"].show = true;
            this.selectBasSpecificationListApi();
            this.localfoodtypeApi();
            this.productcategoryApi();
            // this.querySupplierNamelistApi()
        },
        onOk() {
            this.$refs["formValidate"].validate((valid) => {
                if (valid) {
                    this.foodRaiseAddApi();
                } else {
                    this.loadingModal = false
                }
            });
        },
        // 添加
        foodRaiseAddApi() {
            
            return new Promise((resolve) => {
                this.loading = true;
                let obj = this.form;
                console.log(obj);
                obj.effectiveDate = obj.effectiveDate ? new Date(obj.effectiveDate).Format('yyyy-MM-dd hh:mm:ss') : null
                foodRaiseAdd(obj).then((res) => {
                    if (res.code === 1) {
                        this.$Message.success("添加成功");
                        this.$refs["modal"].show = false;
                        this.$parent.onInit();
                        this.loadingModal = false
                        resolve();
                    } else {
                        this.loading = false;
                        this.loadingModal = false
                    } 
                });
            });
        },
        // 获取食材规格
        selectBasSpecificationListApi() {
            return new Promise(resolve => {
                selectBasSpecificationList({}).then(res => {
                    if (res.code === 1) {
                        this.specificationList = res.data;
                        if (res.data.length && !this.form.materialId) {
                            this.form.specification = res.data[0].specificationValue
                            if(this.form.specification == 0 || this.form.specification == 1) {
                                this.form.weightFlag = '1';
                            }
                        }

                        resolve();
                    }
                })
            })
        },
        // 规格变更
        changeSpecification(value) {
            this.form.weightFlag = '0'
            console.log('value---' + value)
            if (value == 0) {
                this.form.unitWeight = 1
                this.form.weightFlag = '1'
            }
            if (value == 1) {
                this.form.unitWeight = 0.5
                this.form.weightFlag = '1'
            }
            
        },
        // 获取食材种类
        localfoodtypeApi() {
            return new Promise(resolve => {
                localfoodtype({}).then(res => {
                    if (res.code === 1) {
                        this.localfoodtypeList = res.data;
                        resolve();
                    }
                })
            })
        },
        // 获取商品分类
        productcategoryApi() {
            return new Promise(resolve => {
                getProductCategoryList({
                    size: -1
                }).then(res => {
                    if (res.code === 1) {
                        this.productcategoryList = res.data;
                        resolve();
                    }
                })
            })
        },
        // 获取供应商列表
        // querySupplierNamelistApi() {
        //     return new Promise(resolve => {
        //         getDishType({}).then(res => {
        //             if (res.code === 1) {
        //                 console.log('111');
        //                 this.querySupplierList = res.data;
        //                 resolve();
        //             }
        //         })
        //     })
        // },
    },
};
</script>

<style scoped lang="less">
.permission {
    height: 300px;
    width: 500px;
    border: 1px solid #dcdee2;
    overflow-y: auto;
    border-radius: 2px;
    padding: 0 0 0 10px;
}
</style>
